<template>
  <!-- 局领导/科长个人绩效 -->
  <div class="page_padding">
    <MyNavBar @goback="goback" title="个人绩效榜" />
    <div class="score_cont">
      <van-tabs
        class="cont_tab"
        v-model="activeTab"
        sticky
        title-active-color="#d80a06"
        @click="clickTab()"
        v-if="rank == 3">
        <van-tab :title="item.text" :name="item.id" v-for="item in gameOrg" :key="item.id"></van-tab>
      </van-tabs>
      <div class="score_cont_box">
        <div class="tab_list" v-for="(item, index) in personList" :key="index" @click="skipDetails(item)">
          <div class="person_icon">
            <span class="peoIcon iconfont icon-touxiang6"></span>
            <div class="info_top">
              <p>{{ item.name }}</p>
              <p>{{ item.organName }}</p>
            </div>
          </div>
          <div class="person_info">
            <p class="info_bottom">
              <span>{{ item.title }}</span>
              <span v-if="item.scoreLevel" class="hint_span">{{ item.scoreLevel | ScoreLevel }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyNavBar from '@com/MyNavBar'
import { getPersonMerits, selectAllDepartment } from '@api/api-merits.js'
export default {
  name: 'oragnPersonMerits',
  props: {},
  data() {
    return {
      activeTab: 0,
      userInfo: JSON.parse(localStorage.userInfo),
      officeList: [], //科室列表
      serviceCenterList: [], //服务中心列表
      param: {},
      rank: '',
      personList: [],

      // 局下面所有的部门
      gameOrg: [],
    }
  },
  computed: {},
  created() {},
  mounted() {
    let reqRouter = this.$route.query
    this.param = JSON.parse(reqRouter.itemData)
    this.rank = reqRouter.rank
    if (this.rank == 2) {
      // 科长
      this.param.organId = this.userInfo.loginPostInfo.orgId
      this.getPersonMerits()
    } else {
      // 局长
      this.getSelectAllDepartment()
    }
  },
  watch: {},
  filters: {
    ScoreLevel(val) {
      switch (val) {
        case '':
          return ''
        case '1':
          return '好'
        case '2':
          return '较好'
        case '3':
          return '一般'
        case '4':
          return '较差'
        default:
          break
      }
    },
  },
  methods: {
    goback() {
      this.$router.push({ path: '/merits' })
    },
    clickTab() {
      this.param.organId = this.activeTab
      this.getPersonMerits()
    },
    getPersonMerits() {
      //个人绩效-科员
      getPersonMerits({
        currentPage: 1,
        pageSize: 50,
        param: this.param,
      }).then(res => {
        if (res.status == 200) {
          console.log(res.data.content)
          this.personList = res.data.content
          console.log('this.personList--->', this.personList)
        }
      })
    },
    skipDetails(item) {
      this.$router.push({ path: '/personalMerits', query: { itemData: JSON.stringify(item) } })
    },
    // 局长获取所有的科室
    getSelectAllDepartment() {
      selectAllDepartment().then(res => {
        this.gameOrg = res.data
        this.param.organId = this.gameOrg[0].id
        this.getPersonMerits()
      })
    },
  },
  components: {
    MyNavBar,
  },
}
</script>

<style lang="scss" scoped>
.page_padding {
  background: #f5f5f5;
  .score_cont {
    .cont_tab {
      /deep/.van-tabs__wrap {
        background: #fff;
        border-bottom: 1px solid #efefef;
      }
      /deep/.van-tabs__nav {
        width: 60% !important;
      }
    }
    .tab_list {
      background: #fff;
      padding: 12px 0 0 16px;
      width: 100%;
      margin-bottom: 8px;
      .person_icon {
        height: 100%;
        text-align: center;
        display: inline-block;
        .peoIcon {
          width: 40px;
          height: 40px;
          float: left;
          font-size: 100px;
          color: #efe3e3;
        }
        .info_top {
          float: left;
          text-align: left;
          margin-left: 7px;
          & p:nth-child(1) {
            color: #a57d60;
            // font-size: 14px;
            height: 25px;
            line-height: 25px;
          }
          & p:nth-child(2) {
            color: #666666;
            font-size: 12px;
            height: 25px;
            line-height: 20px;
          }
        }
      }
      .person_info {
        margin-left: 7px;
        padding-left: 40px;
        .info_bottom {
          border-top: 1px solid #efefef;
          width: 100%;
          padding: 0 0 20px 0;
          span {
            color: #333333;
            // font-size: 14px;
          }
          .hint_span {
            position: relative;
            top: -2px;
            border-radius: 4px;
            font-size: 12px;
            padding: 0 3px;
            line-height: 15px;
            text-align: center;
            color: #d18315;
            border: 1px solid #d18315;
            background-image: linear-gradient(0deg, #ffdeb0 0%, #fff2dc 100%);
            margin-left: 15px;
            display: inline-block;
          }
        }
      }
    }
  }
}
</style>
